<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务工单管理</el-breadcrumb-item>
        <el-breadcrumb-item>工单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="workorderdetails">
      <el-container>
        <el-aside width="200px">
          <div class="title">工单轨迹</div>
          <el-steps direction="vertical" :space="80" class="steps" :active="steps.length">
            <el-step v-for="(item, index) in steps" :key="index" :title="item.trackDescription">
              <template slot="description" v-if="item.trackName != '已完成'">
                <div>{{ item.msg }}</div>
                <div>{{ item.handleTime }}</div>
              </template>
            </el-step>
          </el-steps>
        </el-aside>
        <el-container>
          <el-header>
            <div class="title">服务人员信息</div>
            <div class="userInformation">
              <div class="userleft">
                <img :src="imgUrl" />
              </div>
              <div class="usercenter">
                <div class="name">
                  姓名：{{ orderdetails.comStaffBasicInfos.realName }}
                </div>
                <div class="name">
                  员工等级：{{ orderdetails.comStaffBasicInfos.level }}级
                </div>
                <div>工单编号：{{ orderdetails.workOrderNo }}</div>
              </div>
              <div class="userright">
                <div class="name">
                  <span style="text-decoration: underline;color:#61affd;cursor:pointer" @click="goToOrderDetails">查看对应订单</span>
                </div>
                <div class="name">
                  手机号：{{ orderdetails.comStaffBasicInfos.phone }}
                </div>
                <div>订单编号：{{ orderdetails.orderNo }}</div>
              </div>
              <!-- 待上门 -->
              <div class="buttons" v-if="
                  orderdetails.isHangUp == false &&
                    orderdetails.orderStatus == '1' &&
                    orderdetails.attachStatus == '0'
                ">
                <el-button size="mini" @click="complete" style="margin-bottom:5px;">完成工单</el-button>
                <div>
                  <el-button size="mini" @click="transform">自动转单</el-button>
                  <el-button size="mini" @click="send(orderdetails)">手动派单</el-button>
                </div>
              </div>
              <!-- 已挂起 -->
              <div class="buttons2" v-if="orderdetails.isHangUp == true">
                <img src="./2.png" style="display:block;width:10px;margin-right:8px;" />
                <span style="color:red;display:block;margin-right:8px;">已挂起</span>
                <el-button size="mini" @click="send(orderdetails)">手动派单</el-button>
              </div>
              <!-- 已迟到 待服务 已超时 服务中 -->
              <div class="buttons" v-if="
                  (orderdetails.isHangUp == false &&
                    orderdetails.attachStatus == '0' &&
                    orderdetails.orderStatus == '2') ||
                    (orderdetails.isHangUp == false &&
                      orderdetails.attachStatus == '0' &&
                      orderdetails.orderStatus == '3') ||
                    orderdetails.attachStatus == '1' ||
                    orderdetails.attachStatus == '2'
                ">
                <el-button size="mini" @click="complete">完成工单</el-button>
              </div>
              <!-- 已取消  已完成无按钮展示 -->
            </div>
          </el-header>
          <div class="tips" v-if="
              pltfmWorkComment &&
                (pltfmWorkComment.satisfactionAnswer ||
                  pltfmWorkComment.qaAnswers)
            ">
            <div class="title">用户评价</div>
            <div class="box">
              <div class="answerOne" v-if="pltfmWorkComment.satisfactionAnswer">
                <div>{{ pltfmWorkComment.satisfactionQuestion }}</div>
                <div style="margin-top:15px;">
                  {{ `用户：${pltfmWorkComment.satisfactionAnswer}` }}
                </div>
              </div>
              <div class="answerOne" v-if="pltfmWorkComment.qaAnswers">
                <div>{{ pltfmWorkComment.qaQuestion }}</div>
                <div style="margin-top:15px;">
                  {{ `用户：${pltfmWorkComment.qaAnswers}` }}
                </div>
              </div>
            </div>
          </div>
          <!-- 改约取消列表 -->
          <div class="editAndCancelList" v-if="memOrderRefundChanges.length > 0">
            <div 
              v-for="(item, index) in memOrderRefundChanges"
              :key="index"
            >
              <!-- 取消订单信息 -->
              <div v-if="item.orderType == 0" class="cancelOrderInfo">
                <div class="title">取消信息</div>
                <div class="cancelBox">
                  <div style="width:33%;">
                    <span>取消时间：</span>
                    <span>{{item.createTime}}</span>
                  </div>
                  <div style="width:33%;">
                    <span>原预约时间：</span>
                    <span>{{item.expectDeliveryTime}}</span>
                  </div>
                </div>
                <div style="width:33%;" class="cancelReason">
                  <span>取消原因：</span>
                  <span>{{item.cancelReason ? item.cancelReason : '无'}}</span>
                </div>
              </div>
              <!-- 改约信息 -->
              <div v-if="item.orderType == 1" class="changeOrderInfo">
                <div class="title">改约信息</div>
                <div class="cancelBox">
                  <div style="width:33%;margin-bottom:15px;">
                    <span>改约时间：</span>
                    <span>{{item.createTime}}</span>
                  </div>
                  <div style="width:33%;margin-bottom:15px;">
                    <span>原预约时间：</span>
                    <span>{{item.expectDeliveryTime}}</span>
                  </div>
                  <div style="width:33%;margin-bottom:15px;">
                    <span>现预约时间：</span>
                    <span>{{item.changeDate}}</span>
                  </div>
                  <div style="width:33%;margin-bottom:15px;">
                    <span>改约原因：</span>
                    <span>{{item.cancelReason ? item.cancelReason : '无'}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-footer>
            <div class="title">服务地址信息</div>
            <div class="addressBottom">
              <div class="addressBottomleft">
                <div class="addressname">
                  联系人：{{ orderdetails.receiverName }}
                </div>
                <div class="addressname">
                  联系电话：{{ orderdetails.receiverMobile }}
                </div>
                <div class="addressname">
                  服务地址：{{ orderdetails.address }}
                </div>
                <div>
                  <span>会员信息：{{ orderdetails.nickname }}</span>
                  <span style="margin-left:15px;">手机号：{{ orderdetails.phone }}</span>
                </div>
              </div>
              <div class="addressBottomright">
                <div class="addressname">
                  预约时间：{{ orderdetails.serviceStartTime }}
                </div>
                <div class="addressname">
                  <span style="margin-right:15px;">迟到：{{
                      `${orderdetails.lateTime}分钟${lateReason}`
                    }}</span>
                  <span>超时：{{
                      `${orderdetails.overTime}分钟${overReason}`
                    }}</span>
                </div>
                <!-- <div class="addressname">用户备注：{{orderdetails.buyerRemark ? orderdetails.buyerRemark : '无'}}</div> -->
                <div>
                  运营备注：{{
                    orderdetails.merchantRemark
                      ? orderdetails.merchantRemark
                      : "无"
                  }}
                </div>
              </div>
            </div>
          </el-footer>
          <el-main>
            <div class="title">服务商品明细</div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="areaNames" label="归属区域" width="110">
              </el-table-column>
              <el-table-column prop="subClassifyName" label="归属分类" width="110">
              </el-table-column>
              <el-table-column prop="skuName" label="规格名称" width="110">
              </el-table-column>
              <el-table-column prop="craftName" label="工艺类型" width="110">
              </el-table-column>
              <el-table-column label="商品类型" width="110">
                <template slot-scope="scope">{{
                  goodsTypeOptions[scope.row.goodsType]
                }}</template>
              </el-table-column>
              <el-table-column prop="numUnit" label="数量" width="110">
              </el-table-column>
              <el-table-column prop="duration" label="服务时长" width="110">
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>

      <!-- 派单 -->
      <el-dialog class="sander" title="" :visible.sync="centerDialogVisible" width="80%" @close="closeDialog">
        <Manually :serviceStartTime="serviceStartTime" :workOrderNos="workOrderNos"></Manually>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import Manually from "./Manually.vue";
const orderStatusOptions = [
  { "1": "待上门" }, // 完成按钮 转单按钮(自动派单)
  { "2": "待服务" }, // 完成按钮
  { "3": "服务中" }, // 完成按钮
  { "4": "已完成" }, // 无按钮
  { "5": "已取消" }, // 无按钮
  { "6": "已挂起" }, // 派单按钮(手动派单)
  { "7": "已迟到" }, // 完成按钮
  { "8": "已超时" } // 完成按钮
];
const goodsTypeOptions = {
  "0": "单项商品",
  "1": "保洁体验卡",
  "2": "家务师体验卡",
  "3": "保洁周期卡",
  "4": "家务师周期卡"
};
export default {
  props: ["list", "times"],
  components: { Manually },
  data () {
    return {
      imgUrl: "", // 头像
      tableData: [], // 商品集合
      statusOptions: {},
      goodsTypeOptions, // 商品类型枚举
      orderdetails: {
        comStaffBasicInfos: {},
        memWorkOrderDelayReasons: [
          {
            type: 1
          },
          {
            type: 2
          }
        ]
      },
      steps: [],
      orderItemType: '',
      workOrderNos: "",
      serviceStartTime: "",
      row: "",
      centerDialogVisible: false,
      pltfmWorkComment: {},
      memOrderRefundChanges: []
    };
  },
  computed: {
    timedesc (name) {
      let msg = "";
      switch (name) {
        case "已支付":
          msg = "支付时间：";
          break;
        case "待上门":
          msg = "创建时间：";
          break;
        case "已迟到":
          msg = "迟到时间：";
          break;
        case "待服务":
          msg = "预约时间：";
          break;
        case "已超时":
          msg = "超时时间：";
          break;
        case "服务中":
          msg = "开始时间：";
          break;
      }
      return msg;
    },
    lateReason () {
      if (this.orderdetails.memWorkOrderDelayReasons.length == 0) {
        return "";
      }
      const leteObj = this.orderdetails.memWorkOrderDelayReasons.find(
        item => item.type == 1
      );
      if (leteObj && leteObj.reason) {
        return `(${leteObj.reason})`;
      }
      return "";
    },
    overReason () {
      if (this.orderdetails.memWorkOrderDelayReasons.length == 0) {
        return "";
      }
      const overObj = this.orderdetails.memWorkOrderDelayReasons.find(
        item => item.type == 2
      );
      if (overObj && overObj.reason) {
        return `(${overObj.reason})`;
      }
      return "";
    }
  },
  methods: {
    //派单
    send (item) {
      this.centerDialogVisible = true;
      this.workOrderNos = item.workOrderNo;
      this.orderItemType = item.orderItemType
      this.serviceStartTime = item.serviceStartTime;
    },
    //关闭弹框的事件
    closeDialog () {
      location.reload();
    },
    async complete () {
      // 完成工单
      this.$confirm("是否确认立即完成工单，完成后不可变更！", "完成工单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 调用完成工单接口 成功后刷新页面
          await this.$http({
            url: "/hssorderadmin/order/memOrder/mgrCompleteService",
            method: "get",
            params: {
              workOrderNo: this.orderdetails.workOrderNo
            }
          });
          window.location.reload();
        })
        .catch(err => {
          //console.log(err);
        });
    },
    async transform () {
      const res = await this.$confirm("确定要进行转单吗？", "确认转单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      try {
        if (res === "confirm") {
          // 点击确定转单
          this.$http({
            url: "/hssorderadmin/order/memOrder/transferWorkOrder",
            method: "POST",
            data: {
              workOrderNo: this.orderdetails.workOrderNo
            }
          }).then(res => {
            if (res.success === 1) {
              // 自动转单成功
              this.$confirm("已成功转单", "转单成功", {
                showCancelButton: false,
                showConfirmButton: false
              });
              setTimeout(() => {
                window.location.reload();
              }, 2000);
            } else {
              // 自动转单失败
              this.$confirm(
                "当前没有符合要求的员工可接单，是否挂起？",
                "转单失败",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                }
              ).then(() => {
                this.$http({
                  url: "/hssorderadmin/order/memOrder/mgrHangUpService",
                  method: "get",
                  params: {
                    workOrderNo: this.orderdetails.workOrderNo
                  }
                }).then(res => {
                  if (res.success === 1) {
                    this.$message.success("订单挂起成功");
                    setTimeout(() => {
                      window.location.reload();
                    }, 2000);
                  } else {
                    this.$message.success("订单挂起失败");
                  }
                });
              });
            }
          });
        }
      } catch (err) {
        //console.log(err);
      }
    },
    goToOrderDetails () {
      // 跳转订单详情
      let orderNo = this.orderdetails.orderNo;
      if (this.orderdetails.parentOrderNo) {
        orderNo = this.orderdetails.parentOrderNo;
      }
      this.$router.push({
        path: "/orderdetails",
        query: {
          orderNo
        }
      });
    }
  },
  activated () {
    let tableList = [];
    // 查询工单详情
    let workOrderNo = this.$route.query.workOrderNo;
    this.$http({
      url: "/hssorderadmin/order/memOrder/findByWorkOrderNo",
      method: "get",
      params: {
        workOrderNo
      }
    })
      .then(res => {
        this.orderdetails = res;
        let { orderGoodsInfos, pltfmWorkComment, memOrderRefundChanges } = res;
        // console.log(pltfmWorkComment)

        // pltfmWorkComment = {
        //   // 小问答
        //   qaQuestion: '你对本次服务满意么?',
        //   qaAnswers: '12313',
        //   // 满意度
        //   satisfactionQuestion: '你对本次服务满意么?',
        //   satisfactionAnswer: null
        // }

        this.pltfmWorkComment = pltfmWorkComment;
        this.imgUrl = res.comStaffBasicInfos.avatarAddress;
        // 改约取消列表
        this.memOrderRefundChanges = memOrderRefundChanges
        orderGoodsInfos.forEach(item => {
          // 商品集合赋值tableData
          tableList.push({
            areaNames: item.areaNames, // 归属区域
            subClassifyName: item.subClassifyName, // 归属分类
            skuName: item.skuName, // 规格名称
            craftName: item.craftName, // 工艺类型
            numUnit: item.numUnit, // 数量
            duration: item.duration, // 服务时长
            orderItemType: item.orderItemType, // 商品类型  弃用
            goodsType: item.goodsType // 商品类型 最新字段
          });
        });
        this.tableData = tableList;
        // 创建steps对应关系对象
        const steps = this.orderdetails.memWorkOrderTracks;
        const newsteps = steps.map(item => {
          let msg = "";

          switch (item.trackDescription) {
            case "已支付":
              msg = "支付时间：";
              break;
            case "待上门":
              msg = "创建时间：";
              break;
            case "已迟到":
              msg = "迟到时间：";
              break;
            case "待服务":
              msg = "服务开始时间：";
              break;
            case "已超时":
              msg = "超时时间：";
              break;
            case "服务中":
              msg = "服务完成时间：";
              break;
          }
          return {
            ...item,
            msg
          };
        });
        this.steps = newsteps;
      })
      .catch(err => {
        //console.log(err);
      });
  }
};
</script>

<style lang="scss" scoped>
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.workorderdetails {
  padding: 10px;
  background-color: #ebeef1;
  .el-aside {
    position: relative;
    top: 0;
    bottom: 0;
    background-color: #fff;
    margin-right: 10px;
    padding-left: 15px;
    padding-top: 15px;
    .title {
      // position: absolute;
      // top: 15px;
      margin-bottom: 20px;
    }
    .steps {
      // position: absolute;
      // top: 40px;
      /deep/.el-steps--vertical {
        height: auto;
      }
    }
  }

  .el-header {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 15px;
    height: 150px !important;
    .title {
      margin-bottom: 20px;
    }
    .userInformation {
      font-size: 12px;
      display: flex;
      align-items: center;
      position: relative;
      .userleft {
        margin-right: 10px;
        padding: 4px;
        background-color: rgba(0, 0, 0, 0.2);
        width: 60px;
        border-radius: 4px;
        img {
          display: block;
          width: 60px;
          height: 60px;
        }
      }
      .usercenter {
        margin-right: 40px;
        .name {
          margin-bottom: 15px;
        }
      }
      .userright {
        .name {
          margin-bottom: 15px;
        }
      }
      .buttons {
        position: absolute;
        right: 30px;
        bottom: 0px;
        display: flex;
        align-items: center;
        flex-direction: column;
      }
      /deep/ .el-button {
        border-color: #61affd;
        color: #61affd;
      }
    }
  }
  .el-main {
    background-color: #fff;
    margin-top: 10px;
    padding: 15px;
    .title {
      margin-bottom: 15px;
    }
  }
  .el-footer {
    background-color: #fff;
    padding: 15px;
    height: 200px !important;
    .title {
      margin-bottom: 20px;
    }
    .addressBottom {
      font-size: 12px;
      display: flex;
      align-items: center;
      .addressname {
        margin-bottom: 15px;
      }
      .addressBottomright {
        margin-left: 180px;
      }
    }
  }
}
.sander {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 20px;
  }
  span {
    margin-right: 50px;
    font-size: 16px;
  }
}
/deep/ .el-button + .el-button {
  margin-left: 0;
}
</style>
<style lang="scss" scoped>
.buttons2 {
  cursor: pointer;
  display: flex;
  align-items: center;
  position: absolute;
  right: 30px;
  bottom: 0px;
}
/deep/ .cell {
  font-size: 12px;
}
</style>
<style lang="scss" scoped>
.tips {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  .title {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    .answerOne {
      margin-right: 60px;
      min-width: 150px;
    }
  }
}
.cancelOrderInfo{
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  min-height: 120px;
  box-sizing: border-box;
  .title{
    margin-bottom: 20px;
  }
  .cancelBox{
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
  .cancelReason{
    font-size: 12px;
  }
}
.changeOrderInfo{
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  .title{
    margin-bottom: 20px;
  }
  .cancelBox{
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
}
</style>
